
<template>
  <el-upload
    class="upload-demo"
    :on-change="uploadFile"
    multiple
    :limit="rules.maxSize"
    :on-exceed="handleExceed"
    :http-request="uploadHttpRequest"
    :show-file-list="false"
    :disabled="disabled"
   
    accept="video/*"
    action="#"
    ref="upload"
  >
    <el-button :disabled="disabled" size="small" type="primary">点击上传</el-button>
    <el-button :disabled="disabled" size="small" type="primary"  @click.prevent.stop="delItem(0)">删除视频</el-button>
    <template #tip>
      <div class="el-upload__tip">只能上传 MP4 文件</div>
    </template>
  </el-upload>
  <div class="demo-image__preview upload-imgs-container">
    <!-- <div v-for="(item,i) in fileList" :key="i">
      <div class="thumb-item">
        <el-image
          :ref="setImageRef"
          style="width: 200px; height: 200px"
          :src="item.url"
          :preview-src-list="viewFileList"
        ></el-image>
        <div class="control">
          <i v-if="!disabled" class="el-icon-close del" @click.prevent.stop="delItem(i)" title="删除"></i>
          <i
            class="preview el-icon-view"
            title="预览"
            style="cursor: pointer"
            @click.stop="previewImg(item,i)"
          ></i>
        </div>
      </div>
    </div> -->
     <video v-if="fileList&&fileList.length>0"  :src="fileList[0].url" class="avatar" controls="controls">
              您的浏览器不支持视频播放
      </video>

  </div>
</template>
    
<script>
export default {
  props: {
    rules: {
      type: [Object, Function],
      default: () => ({
        maxSize: 1
      })
    },
    imageFileList:{
      type:Array,
      default:()=>[]
    },
    disabled:{
      type:Boolean,
      default:false
    },
  },
  watch:{
    imageFileList:{
      immediate:true,
      deep:true,
      handler(val){
        this.fileList = val
      }
    }
  },
  computed: {},
  data() {
    return {
      preview: true,
      imageRefs: [],
      viewFileList: [],
      showViewer: false,
      initialIndex: 0,
      fileList: [],
      queryId:""
    };
  },
  methods: {
    clearFileList() {
      this.fileList = [];
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.rules.maxSize} 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    uploadFile(param) {
      const file = param;
      console.log(file)
      // if (file.status !== 'ready') return;
      // let extension = file.name.substr(file.name.lastIndexOf(".") + 1);
      // const whiteList = ["mp4"];
      // if (whiteList.indexOf(extension.toLowerCase()) === -1) {
      //   this.$message({
      //     messgae: "请上传mp4类型",
      //     type: "warning"
      //   });
      //   return false;
      // }
      this.fileList.push({
        name: file.name,
        url: URL.createObjectURL(file.raw)
      });
      this.$emit("setForm", file);
    },
    uploadHttpRequest(file){
      console.log(file)
    },
    /**
     * 预览图像
     * @param {Object} data 需要预览的项的数据
     * @param {Number} index 索引序号
     */
    previewImg(data, index) {
      this.viewFileList = this.fileList.map(item => item.url);
      this.showViewer = true;
      this.initialIndex = index;
    },
    setImageRef(el) {
      if (el) {
        this.imageRefs.push(el);
      }
    },
    delItem(id) {
      this.fileList.splice(id, 1);
      this.$refs.upload.clearFiles()
    }
  }
};
</script>
<style lang="scss" scoped>
.upload-imgs-container {
  display: flex;
  flex-wrap: wrap;

  &:focus {
    outline: none;
  }

  .upload-item,
  .thumb-item {
    border-radius: 3px;
    transition: all 0.1s;
    color: #666666;
    margin-right: 1em;
    margin-bottom: 1em;
    position: relative;
    &.disabled {
      color: #ababab;
    }

    &:not(.disabled):hover {
      border-color: #3963bc;
      color: #3963bc;
    }
  }

  .thumb-item {
    :v-deep(.el-image-viewer__canvas) {
      position: absolute;
      max-width: 800px;
      left: 50%;
      transform: translateX(-50%);
    }
    .info {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      transition: all 0.3s;
      transition-delay: 0.1s;

      .wait-upload {
        background: #ffcb71;
        color: white;
        position: absolute;
        display: inline-block;
        width: 1.7em;
        height: 1.5em;
        top: 0;
        right: 0;
        border-radius: 0 0 0 1.4em;
        transition: all 0.1s;

        &::before {
          font-size: 1.4em;
          position: absolute;
          right: -1px;
          transform: scale(0.7);
        }
      }
    }

    .control {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
      background-color: rgba(0, 0, 0, 0.3);
      transition: all 0.3s;
      transition-delay: 0.1s;

      .del {
        background: #f4516c;
        color: white;
        position: absolute;
        display: inline-block;
        width: 1.7em;
        height: 1.5em;
        top: 0;
        right: 0;
        opacity: 0;
        border-radius: 0 0 0 1.4em;
        transition: all 0.1s;

        &::before {
          font-size: 1.4em;
          position: absolute;
          right: -1px;
          transform: scale(0.7);
        }

        &:hover {
          transform: translate(-0.5em, 0.4em) scale(1.5);
        }
      }

      .preview {
        color: white;
        font-size: 2em;
        transition: all 0.2s;

        &:hover {
          transform: scale(1.2);
        }
      }

      .control-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        color: white;
        background-color: rgba(0, 0, 0, 0.3);
        font-size: 1.5em;
        display: flex;
        justify-content: space-around;
        transform: translate(0, 100%);
        transition: all 0.2s;
        transition-delay: 0.1s;
        padding: 5px 0;

        .control-bottom-btn {
          transform: all 0.2s;

          &.disabled {
            color: #ababab;
            cursor: not-allowed;
          }

          &:not(.disabled):hover {
            transform: scale(1.2);
          }
        }
      }
    }

    &:hover {
      .control {
        opacity: 1;
      }

      .del {
        opacity: 1;
      }

      .control-bottom {
        transform: translate(0, 0);
      }
    }
  }

  .upload-imgs__input {
    display: none;
  }
}
</style>


    